<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin:0px;padding:0px;}
		header{
			width: 100%;height: 50px;background: #cccccc;
		}
		.btn1{
			margin:0px auto;text-align: center;
		}
		.tab table{
			margin:0px auto;text-align: center;
		}
		.tab table th{
			width: 150px;
		}
		#box{
			width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;left: 0px;top: 0px;display: none;
		}
		.newbook{
			width: 800px;height: 400px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;background: rgba(0,0,0,0.2);
		}
		.topbook{
			width: 100%;height: 30px;background: skyblue;
		}
		.topbook span{
			float: right;margin-left: 15px;
		}
		.newbook ul{
			text-align: right;list-style: none;font-size: 20px;color:white;
		}
		.newbook ul li{
			margin-top: 20px;
		}
		.left{
			float: left;margin-left: 20px;
		}
		.right{
			float: right;margin-right: 20px;
		}
		.add1{
			position: absolute;right: 0px;bottom: 0px;
		}
		.span1{
			display: none;
		}
	</style>
</head>
<body>
	<header></header>
	<div class="btn1">
		<input type="button" value="添加数据" id="add">
		<input type="button" value="刷新" id="shuaxin">
	</div>
	<div class="tab">
		<table>
			<thead>
				<tr>
					<th><input type="checkbox">图片</th>
					<th>书名</th>
					<th>作者</th>
					<th>会员价</th>
					<th>出版社</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="hezi">
				
			</tbody>
		</table>
	</div>
	<div id="box">
		<div class="newbook">
			<div class="topbook">
				新建书籍<span id="yc">x</span><span>c</span><span>-</span>
			</div>
			<ul class="left">
				<li>书名<input type="text"></li>
				<li>会员价<input type="text"></li>
				<li>出版社<input type="text"></li>
				<li>作者<input type="text"></li>
			</ul>
			<ul class="right">
				<li>出版时间<input type="text"></li>
				<li>会员价<input type="text"></li>
				<li>图片<input type="text"></li>
				<li>评分<input type="text"></li>
				<li>上架时间<input type="text"></li>
			</ul>
			<input type="button" value="添加" id="add1">
		</div>
	</div>
</body>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
add.onclick=function(){
	box.style.display="block";
}
var t;
var t1;
shuaxin.onclick=function(){
	$("#hezi tr").remove();
	$.ajax({
		url:"http://localhost:2403/books",
		type:"get",
		success:function(data){
			for (var i = 0; i < data.length; i++) {
				$("<tr class='tr1'><td><input type='checkbox'><img src='"+data[i].picture+"'></td><td>"+data[i].name+"</td><td>"+data[i].author+"</td><td>"+data[i].price+"</td><td>"+data[i].chubanshe+"</td><td><button id='del'>删除</button><button id='change'>修改</button><span class='span1'>"+data[i].id+"</span></td></tr>").appendTo($("#hezi"));

				$(".tr1").on("click","#del",function(e){

					t=this.parentNode.parentNode;
					deleData(data);
					t.remove();
				})
				
			}
			$(".tr1").on("click","#change",function(){
				t1=this.parentNode.parentNode;
				$("#box").css("display","block");   
				$.get("http://localhost:2403/books",function(data){
				for (var i = 0; i < data.length; i++) {
					$("input").eq(4).val(data[i].name);
					$("input").eq(5).val(data[i].price);
					$("input").eq(6).val(data[i].chubanshe);
					$("input").eq(7).val(data[i].author);
					$("input").eq(8).val(data[i].uptime);
					$("input").eq(9).val(data[i].vip);
					$("input").eq(10).val(data[i].picture);
					$("input").eq(11).val(data[i].grade);
					$("input").eq(12).val(data[i].shangjiatime);
					console.log(t1);
					putData(data);
					t1.remove();
					}
				})
			})
		}
	})
	// $.get("http://localhost:2403/books",function(data){
	// 	for (var i = 0; i < data.length; i++) {
	// 		$("<tr class='tr1'><td><input type='checkbox'><img src='"+data[i].picture+"'></td><td>"+data[i].name+"</td><td>"+data[i].author+"</td><td>"+data[i].price+"</td><td>"+data[i].chubanshe+"</td><td><button id='del'>删除</button><button id='change'>修改</button><span class='span1'>"+data[i].id+"</span></td></tr>").appendTo($("#hezi"));

	// 		$(".tr1").on("click","#del",function(e){

	// 			t=this.parentNode.parentNode;
	// 			deleData(data);
	// 			t.remove();
	// 		})
			
	// 	}
	// 	$(".tr1").on("click","#change",function(){
	// 				t1=this.parentNode.parentNode;
	// 			$("#box").css("display","block");
	// 			$.get("http://localhost:2403/books",function(data){
	// 			for (var i = 0; i < data.length; i++) {
	// 				$("input").eq(4).val(data[i].name);
	// 				$("input").eq(5).val(data[i].price);
	// 				$("input").eq(6).val(data[i].chubanshe);
	// 				$("input").eq(7).val(data[i].author);
	// 				$("input").eq(8).val(data[i].uptime);
	// 				$("input").eq(9).val(data[i].vip);
	// 				$("input").eq(10).val(data[i].picture);
	// 				$("input").eq(11).val(data[i].grade);
	// 				$("input").eq(12).val(data[i].shangjiatime);
	// 				console.log(t1);
	// 				putData(data);
	// 				t1.remove();
	// 				}
	// 			})
	// 		})
	// 	})

}
function putData(data){
	$.ajax({
			url:"http://localhost:2403/books"+"/"+$("span").html(),
			type:"put",
			success:function(data){
				t1.remove();
			},
			error:function(err){
				console.log(err);
			}
		})
}
function deleData(data){
		$.ajax({
			url:"http://localhost:2403/books"+"/"+$("span").html(),
			type:"delete",
			success:function(data){
				t.remove();
			},
			error:function(err){
				console.log(err);
			}
		})
	}
add1.onclick=function(){
	box.style.display="none";
		var a1={
			name:$("input").eq(4).val(),
			price:$("input").eq(5).val(),
			chubanshe:$("input").eq(6).val(),
			author:$("input").eq(7).val(),
			uptime:$("input").eq(8).val(),
			vip:$("input").eq(9).val(),
			picture:$("input").eq(10).val(),
			grade:$("input").eq(11).val(),
			shangjiatime:$("input").eq(12).val()
		};
		$.ajax({
			url:"http://localhost:2403/books",
			type:"post",
			data:a1,
			success:function(data){
				console.log(data);
			},
			error:function(err){
				console.log(err);
			}
		})
	}
</script>
</html>